<template>
  <el-select
    :value="value"
    @input="val => $emit('input', val)"
    filterable
    remote
    reserve-keyword
    placeholder="请输入房间号"
    clearable
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
import { listRoom } from "@/api/base/room";
export default {
  props: {
    value: {},
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: [],
      loading: false,
      timer: null
    };
  },
  methods: {
    remoteMethod(query) {
      if(this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (query) {
          this.loading = true;
          listRoom({
            ...this.params,
            pageNum: 1,
            pageSize: 9999,
            roomNo: query
          }).then(res => {
            this.options = res.rows.map(item => {
              return {
                value: item.id,
                label: item.roomNo
              }
            });
          }).finally(() => {
            this.loading = false;
          })
        } else {
          this.options = [];
        }
      }, 1000)
    }
  }
};
</script>